<script setup>
import NodeDataPicker from '../../ele/node-data-picker.vue';
import {DFT_ICONS} from "@jzl/icons";
import {computed, onMounted, watch} from "vue";
import _ from "lodash";

const props = defineProps({
  ext: Object,
  item: Object,
  page: Object,
  currentNode: Object,
  elemNodes: [ Array, Object ],
  currentEleData: Object
})

const LIST_DFT_EXT = {
  loadMode: 'fixed', // fixed | dyn
  loadAction: 'hand', // hand-手动加载 | page-分页 | scroll-滚动底部加载 | call- js调用
  pageSize: 10,
  loadingText: '加载中...',
  finishedText: '没有更多了',
  loadMoreText: '点击加载更多'
}

// module var & page var
const varGroups = computed(() => {
  let moduleVars = props.item?.vars;
  let pageVars = props.page?.vars;

  return [{
    label: '模块变量 iVar',
    options: _.map(moduleVars || [], (v, k) => ({ ...v, value: `iVar:${ v.prop }`, type: 'iVar' }))
  }, {
    label: '页面变量 var',
    options: _.map(pageVars || [], (v, k) => ({ ...v, value: `var:${ v.prop }`, type: 'var' }))
  }]
})

const initExtValue = () => {
  if(props.ext) {
    _.assignIn(props.ext, {...LIST_DFT_EXT, ...props.ext})
  }
}

watch(() => props.currentNode?.code, (val) => {
  initExtValue()
})

onMounted(() => {
  initExtValue()
})
</script>

<template>
  <div
    class="ele-prop-item"
    v-if="ext"
  >
    <el-form
      ref="form"
      label-position="top"
    >
      <el-form-item label="数据模式">
        <template #label>
          <h5>数据模式</h5>
        </template>
        <el-radio-group v-model="ext.loadMode" size="small">
          <el-radio label="fixed">固定数据</el-radio>
          <el-radio label="dyn">动态数据</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="ext.loadMode === 'fixed'"
        label="数据源"
      >
        <template #label>
          <h5>数据源</h5>
        </template>
        <NodeDataPicker
          v-model="ext.dataPath"
          v-bind="$attrs"
          :item="item"
          :page="page"
          :current-ele-data="currentEleData"
          :current-node="currentNode"
          :elem-nodes="elemNodes"
          :multiple="true"
          :ignore-check-data-type="true"
          class="mb-2"
        />
      </el-form-item>
      <el-form-item
        v-else
        label="关联变量"
      >
        <template #label>
          <h5>关联变量</h5>
        </template>
        <el-select
          v-model="ext.dataVar"
          popper-class="select-vt"
        >
          <el-option-group
            v-for="group in varGroups"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="(v, k) in group.options"
              :value="v.value"
              :label="v.prop"
            >
            <span class="sop-label">
              {{ v.prop }}
            </span>
              <span class="sop-tip">
              {{ v.label }}
            </span>
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <template v-if="ext.loadMode === 'dyn'">
        <el-form-item
          label="列表数据"
          v-if="ext.loadMode === 'dyn'"
        >
          <template #label>
            <h5>列表数据
<!--              <a
                v-if="ext.filterType === 'lowcode'"
                href="javascript:;"
                class="logic-low-link"
                @click="handleShowLowcodeWin"
              ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>-->
            </h5>
          </template>
          <PageLowcodePicker
            v-model:type="ext.filterType"
            v-model:fx="ext.filterFx"
            v-model:fn="ext.filterFn"
            :page="page"
          >
            <template #options>
              <el-option
                value="__api_filter"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
            </template>
          </PageLowcodePicker>
<!--          <div class="elem-design-prop-logic-item">
            <el-radio-group
              size=""
              v-model="ext.filterType"
              class="logic-low-type"
            >
              <el-radio-button
                label="formula"
                v-tippy content="公式"
              ><JIcon :icon="DFT_ICONS.formula" style="margin: -8px;" /></el-radio-button>
              <el-radio-button
                label="lowcode"
                v-tippy content="低码"
              ><JIcon :icon="DFT_ICONS.code" style="margin: -8px;" /></el-radio-button>
            </el-radio-group>
            <FormulaInput
              v-if="ext.filterType === 'formula'"
              placeholder="配置公式"
              v-model="ext.filterFx"
              size=""
              class="logic-low-input"
            />
            <el-select
              v-else-if="ext.filterType === 'lowcode'"
              v-model="ext.filterFn"
              size=""
              class="logic-low-input"
              clearable
              placeholder="选择低码函数"
            >
              <el-option
                value="__api_filter"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
              <el-option
                v-for="(h, idx) in handlerXList"
                :value="h.funcName"
              >
                {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
              </el-option>
              <hr style="margin: 8px 0px;" v-if="handlerList?.length"/>
              <el-option
                v-for="(h, idx) in handlerList"
                :value="h"
                :label="h"
              />
            </el-select>
          </div>-->
        </el-form-item>
        <el-form-item label="数据总数">
          <template #label>
            <h5>数据总数
<!--              <a
                v-if="ext.getTotalType === 'lowcode'"
                href="javascript:;"
                class="logic-low-link"
                @click="handleShowLowcodeWin"
              ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>-->
            </h5>
          </template>
          <PageLowcodePicker
            v-model:type="ext.getTotalType"
            v-model:fx="ext.getTotalFx"
            v-model:fn="ext.getTotalFn"
            :page="page"
          >
            <template #options>
              <el-option
                value="__api_getTotal"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
            </template>
          </PageLowcodePicker>
<!--          <div class="elem-design-prop-logic-item">
            <el-radio-group
              size=""
              v-model="ext.getTotalType"
              class="logic-low-type"
            >
              <el-radio-button
                label="formula"
                v-tippy content="公式"
              ><JIcon :icon="DFT_ICONS.formula" style="margin: -8px;" /></el-radio-button>
              <el-radio-button
                label="lowcode"
                v-tippy content="低码"
              ><JIcon :icon="DFT_ICONS.code" style="margin: -8px;" /></el-radio-button>
            </el-radio-group>
            <FormulaInput
              v-if="ext.getTotalType === 'formula'"
              placeholder="配置公式"
              v-model="ext.getTotalFx"
              size=""
              class="logic-low-input"
            />
            <el-select
              v-else-if="ext.getTotalType === 'lowcode'"
              v-model="ext.getTotalFn"
              size=""
              class="logic-low-input"
              clearable
              placeholder="选择低码函数"
            >
              <el-option
                value="__api_getTotal"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
              <el-option
                v-for="(h, idx) in handlerXList"
                :value="h.funcName"
              >
                {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
              </el-option>
              <hr style="margin: 8px 0px;" v-if="handlerList?.length"/>
              <el-option
                v-for="(h, idx) in handlerList"
                :value="h"
                :label="h"
              />
            </el-select>
          </div>-->
        </el-form-item>
        <el-form-item label="当前页码">
          <template #label>
            <h5>当前页码
<!--              <a
                v-if="ext.getPageType === 'lowcode'"
                href="javascript:;"
                class="logic-low-link"
                @click="handleShowLowcodeWin"
              ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>-->
            </h5>
          </template>
          <PageLowcodePicker
            v-model:type="ext.getPageType"
            v-model:fx="ext.getPageFx"
            v-model:fn="ext.getPageFn"
            :page="page"
          >
            <template #options>
              <el-option
                value="__api_getPage"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
            </template>
          </PageLowcodePicker>
<!--          <div class="elem-design-prop-logic-item">
            <el-radio-group
              size=""
              v-model="ext.getPageType"
              class="logic-low-type"
            >
              <el-radio-button
                label="formula"
                v-tippy content="公式"
              ><JIcon :icon="DFT_ICONS.formula" style="margin: -8px;" /></el-radio-button>
              <el-radio-button
                label="lowcode"
                v-tippy content="低码"
              ><JIcon :icon="DFT_ICONS.code" style="margin: -8px;" /></el-radio-button>
            </el-radio-group>
            <FormulaInput
              v-if="ext.getPageType === 'formula'"
              placeholder="配置公式"
              v-model="ext.getPageFx"
              size=""
              class="logic-low-input"
            />
            <el-select
              v-else-if="ext.getPageType === 'lowcode'"
              v-model="ext.getPageFn"
              size=""
              class="logic-low-input"
              clearable
              placeholder="选择低码函数"
            >
              <el-option
                value="__api_getPage"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
              <el-option
                v-for="(h, idx) in handlerXList"
                :value="h.funcName"
              >
                {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
              </el-option>
              <hr style="margin: 8px 0px;" v-if="handlerList?.length"/>
              <el-option
                v-for="(h, idx) in handlerList"
                :value="h"
                :label="h"
              />
            </el-select>
          </div>-->
        </el-form-item>
        <el-form-item label="是否完结">
          <template #label>
            <h5>是否完结
<!--              <a
                v-if="ext.isFinishedType === 'lowcode'"
                href="javascript:;"
                class="logic-low-link"
                @click="handleShowLowcodeWin"
              ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>-->
            </h5>
          </template>
          <PageLowcodePicker
            v-model:type="ext.isFinishedType"
            v-model:fx="ext.isFinishedFx"
            v-model:fn="ext.isFinishedFn"
            :page="page"
          >
            <template #options>
              <el-option
                value="__api_isFinished"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
            </template>
          </PageLowcodePicker>
<!--          <div class="elem-design-prop-logic-item">
            <el-radio-group
              size=""
              v-model="ext.isFinishedType"
              class="logic-low-type"
            >
              <el-radio-button
                label="formula"
                v-tippy content="公式"
              ><JIcon :icon="DFT_ICONS.formula" style="margin: -8px;" /></el-radio-button>
              <el-radio-button
                label="lowcode"
                v-tippy content="低码"
              ><JIcon :icon="DFT_ICONS.code" style="margin: -8px;" /></el-radio-button>
            </el-radio-group>
            <FormulaInput
              v-if="ext.isFinishedType === 'formula'"
              placeholder="配置公式"
              v-model="ext.isFinishedFx"
              size=""
              class="logic-low-input"
            />
            <el-select
              v-else-if="ext.isFinishedType === 'lowcode'"
              v-model="ext.isFinishedFn"
              size=""
              class="logic-low-input"
              clearable
              placeholder="选择低码函数"
            >
              <el-option
                value="__api_isFinished"
                label="表单数据默认处理"
              >表单数据默认处理</el-option>
              <el-option
                v-for="(h, idx) in handlerXList"
                :value="h.funcName"
              >
                {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
              </el-option>
              <hr style="margin: 8px 0px;" v-if="handlerList?.length"/>
              <el-option
                v-for="(h, idx) in handlerList"
                :value="h"
                :label="h"
              />
            </el-select>
          </div>-->
        </el-form-item>
        <el-form-item label="加载方法">
          <template #label>
            <h5>加载方法
<!--              <a
                href="javascript:;"
                class="logic-low-link"
                @click="handleShowLowcodeWin"
              ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>-->
            </h5>
          </template>
            <PageLowcodePicker
              mode="fn"
              v-model:fn="ext.loadFn"
              :page="page"
            >
              <template #options>
                <el-option
                  value="__api_load"
                  label="表单数据默认处理"
                >表单数据默认处理</el-option>
              </template>
            </PageLowcodePicker>
        </el-form-item>
        <el-form-item label="每页数量">
          <el-input-number
            v-model="ext.pageSize"
            :min="1"
          />
        </el-form-item>
        <el-form-item label="加载文字提示">
          <el-input v-model="ext.loadingText" placeholder="加载文字提示" />
        </el-form-item>
        <el-form-item label="完结文字提示">
          <el-input v-model="ext.finishedText" placeholder="完结文字提示" />
        </el-form-item>
        <el-form-item label="加载更多按钮文字">
          <el-input v-model="ext.loadMoreText" placeholder="加载更多按钮文字" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-select-group__title {
  font-size: 12px;
  text-align: center;
}
</style>
